<template>
    <div class="categorySecond">
        <img :src="adImage" class="titleImg">
        <ul>
            <li v-for="item in category.CSList" 
                :key="item.id"
                @click="toList(item.categoryCode)"    
            >
                <img :src="item.categoryImage">
                <span>{{item.categoryName}}</span>
            </li>            
        </ul>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    props: ['adImage'],
    data() {
        return {
            code: ''
        }
    },
    methods: {
        toList(code) {
            this.code = code
            this.$router.push({path: `/goodsList/${code}`})
        }
    },
    computed: {
        ...mapState(['category'])
    }
}
</script>

<style lang="scss" scoped>
    .categorySecond {
        flex: 1;
        margin: 0.08rem;
        .titleImg {
            width: 100%;
        }
        ul {
            display: flex;
            flex-wrap: wrap;
            li {
                width: 31.33333333%;
                margin: 1%;
                overflow: hidden;
                text-align: center;
                font-size: .12rem;
                color: #666;
                letter-spacing: 1px;
                img {
                    display: block;
                    width: 100%;
                }
            }
        }
    }
</style>
